import React,{useState,useEffect} from 'react'
import '@/assets/OrderList/index.less'
import Axios from 'axios'
import fetch from '@/utils/request'

function index(props:any) {
	let [tabList,settabList] = useState(['全部','待支付','已完成','已取消'])
	let [tabindex,settabindex] = useState(0)//tab切换下标
	let [orderList,setorderList] = useState<any>([])//所有订单的数据
	let [orderLists,setorderLists] = useState([])//拷贝一份所有数据方便从待付款以及别的状态切换到全部的时候发生二次请求

	useEffect(() => {
		fetch.get('/api/order/getOrderList').then((res:any)=>{
			// console.log(res)
			setorderList(orderList=res.orderData)//赋值给所有全部订单
			setorderLists(orderLists=res.orderData)//备份一份全部数据方便从待付款以及别的状态切换到全部订单时发生二次请求
		})
	},[])
	//头部下标切换函数
	const tabClick = (index:any) =>{
			settabindex(tabindex=index)//tab切换添加类名
			switch(index)//switch用拷贝的orderLists去进行改变这样的化可以避免多次请求
			{
					//filter会改变原数组这是就用到了备份的orderLists
					case 0:
							setorderList(orderList=orderLists)
							return orderList
					case 1:
							setorderList(orderList=orderLists.filter((item:any)=>item.order_status_text==='待支付'))
							return orderList
					case 2:
							setorderList(orderList=orderLists.filter((item:any)=>item.order_status_text==='已完成'))
							return orderList
					case 3:
							setorderList(orderList=orderLists.filter((item:any)=>item.order_status_text==='已取消'))
							return orderList
					default :
							return orderList
			}
	}

	const clickDetail = (item:any) =>{
			props.history.push('/orderdetail',item)
	}
	return (
			<div className='my_order'>
					<p className='my_order_tab_header'>
							{
									tabList.map((item,index)=>{
											return <span key={index} className={tabindex===index?'my_order_avtive':''} onClick={()=>{
													tabClick(index)
											}}>{item}</span>
									})
							}
					</p>
					<div className='order_main'>
					<ul>
							{
									orderList&& orderList.map((item:any,index:any)=>{
									return <li key={index} onClick={()=>{
											clickDetail(item)
									}}>
											<img src={require('../../assets/age.png')} alt=''/>
											<p className='title_p'>
													<span>{item.pay_way}</span>
													<span className='price_active'><span>价格:</span>¥{item.price}</span>
											</p>
											<p className='state_p'>
													{item.order_status_text}
											</p>
									</li>
									})
							}
					</ul>
					</div>
			</div>
	)
}

export default index
